// 状态信息面板组件 - 基于用户需求说明的车端状态显示

import React from 'react';
import { useHmiState } from '../hooks/useHmiState';
import {
  Thermometer,
  Battery,
  Navigation,
  Wifi,
  WifiOff,
  AlertTriangle,
  Gauge,
  Car,
  Settings
} from 'lucide-react';

const StatusPanel: React.FC = () => {
  const { vehicleStatus, navigationInfo, moduleStatus } = useHmiState();

  const getModuleStatusIcon = (status: string) => {
    switch (status) {
      case 'online':
        return <Wifi size={16} className="text-success-400" />;
      case 'warning':
        return <AlertTriangle size={16} className="text-warning-400" />;
      case 'offline':
        return <WifiOff size={16} className="text-danger-400" />;
      default:
        return <WifiOff size={16} className="text-gray-400" />;
    }
  };



  return (
    <div className="control-panel">
      <h3 className="text-lg font-semibold mb-4 text-white">车辆状态</h3>

      {/* 车端状态显示 - 速度、限速、巡航车速、档位、自动驾驶状态 */}
      <div className="grid grid-cols-2 gap-4 mb-4">
        <div className="status-card">
          <div className="flex items-center gap-2 mb-2">
            <Gauge size={18} className="text-primary-400" />
            <span className="text-sm text-gray-300">当前速度</span>
          </div>
          <div className="text-2xl font-bold text-white">{vehicleStatus.speed} km/h</div>
        </div>

        <div className="status-card">
          <div className="flex items-center gap-2 mb-2">
            <Gauge size={18} className="text-warning-400" />
            <span className="text-sm text-gray-300">限速</span>
          </div>
          <div className="text-2xl font-bold text-white">{vehicleStatus.speedLimit} km/h</div>
        </div>

        <div className="status-card">
          <div className="flex items-center gap-2 mb-2">
            <Car size={18} className="text-blue-400" />
            <span className="text-sm text-gray-300">档位</span>
          </div>
          <div className="text-2xl font-bold text-white">{vehicleStatus.gear}</div>
        </div>

        <div className="status-card">
          <div className="flex items-center gap-2 mb-2">
            <Settings size={18} className={`${vehicleStatus.autonomousMode ? 'text-success-400' : 'text-gray-400'}`} />
            <span className="text-sm text-gray-300">自动驾驶</span>
          </div>
          <div className={`text-lg font-bold ${vehicleStatus.autonomousMode ? 'text-success-400' : 'text-gray-400'}`}>
            {vehicleStatus.autonomousMode ? '已激活' : '手动模式'}
          </div>
        </div>
      </div>

      {/* 巡航车速显示 */}
      <div className="mb-4">
        <div className="status-card">
          <div className="flex items-center gap-2 mb-2">
            <Navigation size={18} className="text-blue-400" />
            <span className="text-sm text-gray-300">巡航车速</span>
          </div>
          <div className="text-2xl font-bold text-white">{vehicleStatus.cruiseSpeed || 45} km/h</div>
        </div>
      </div>

      {/* 电池和温度 */}
      <div className="grid grid-cols-2 gap-4 mb-4">
        <div className="status-card">
          <div className="flex items-center gap-2 mb-2">
            <Battery size={18} className={`text-${vehicleStatus.battery > 20 ? 'success' : 'danger'}-400`} />
            <span className="text-sm text-gray-300">电池</span>
          </div>
          <div className="text-2xl font-bold text-white">{vehicleStatus.battery}%</div>
          <div className="w-full bg-gray-700 rounded-full h-2 mt-2">
            <div
              className={`h-2 rounded-full ${
                vehicleStatus.battery > 20 ? 'bg-success-500' : 'bg-danger-500'
              }`}
              style={{ width: `${vehicleStatus.battery}%` }}
            />
          </div>
        </div>

        <div className="status-card">
          <div className="flex items-center gap-2 mb-2">
            <Thermometer size={18} className="text-blue-400" />
            <span className="text-sm text-gray-300">温度</span>
          </div>
          <div className="text-2xl font-bold text-white">{vehicleStatus.temperature}°C</div>
        </div>
      </div>

      {/* 导航信息 */}
      <div className="status-card mb-4">
        <div className="flex items-center gap-2 mb-3">
          <Navigation size={18} className="text-primary-400" />
          <span className="text-sm text-gray-300">导航信息</span>
        </div>
        <div className="space-y-2">
          <div className="flex justify-between">
            <span className="text-gray-300">目的地：</span>
            <span className="text-white font-medium">{navigationInfo.destination}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-gray-300">距离：</span>
            <span className="text-white font-medium">{navigationInfo.distance} km</span>
          </div>
          <div className="flex justify-between">
            <span className="text-gray-300">预计到达：</span>
            <span className="text-white font-medium">{navigationInfo.eta} 分钟</span>
          </div>
          <div className="flex justify-between">
            <span className="text-gray-300">下一路口：</span>
            <span className="text-white font-medium">{navigationInfo.nextTurn}</span>
          </div>
        </div>
      </div>

      {/* 模块状态 */}
      <div className="status-card">
        <h4 className="text-sm font-medium text-gray-300 mb-3">系统模块状态</h4>
        <div className="grid grid-cols-2 gap-3">
          {Object.entries(moduleStatus).map(([module, status]) => (
            <div key={module} className="flex items-center justify-between">
              <span className="text-sm text-gray-300 capitalize">{module}</span>
              {getModuleStatusIcon(status)}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default StatusPanel;
